<template>
  <van-form>
    <van-tabs v-model:active="active" :autocomplete="false">
      <van-tab title="账号密码登录">
        <van-cell-group inset>
          <van-field v-model="username" name="username" label="用户名" placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" @click="loginByAcc(username, password)">
            登录
          </van-button>
        </div>
        <div style="margin: 16px;">
          <router-link to="register">
            <van-button round block type="primary" native-type="submit">
            去注册
          </van-button>
          </router-link>
        </div>
      </van-tab>
      <van-tab title="手机号登录">
        <van-cell-group inset>
          <van-field v-model="phone" name="手机号" label="手机号" placeholder="请输入手机号"
            :rules="[{ required: true, message: '请填写手机号' }]">
            <template #button>
            <van-button size="small" type="primary"  @click="getCodes(phone)">发送验证码</van-button>
          </template>
            </van-field>
          <van-field v-model="code" type="number" name="code" label="验证码" placeholder="验证码"
            :rules="[{ required: true, message: '请填写验证码' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" @click="loginPhone(phone, code)">
            登录
          </van-button>
        </div>
        <div style="margin: 16px;">
          <router-link to="register">
            <van-button round block type="primary" native-type="submit">
            去注册
          </van-button>
          </router-link>
        </div>
      </van-tab>
    </van-tabs></van-form>
</template>

<script setup lang="ts">
import { showNotify } from 'vant';
import 'vant/es/notify/style';
import { ref } from 'vue'
import { loginByAccount, getCode, vertifyCode, loginByCode } from '../../api/login-register'

const active = ref(0)
//账号密码登录
const username: string | number = ref()
const password: string = ref()
//账号密码登录逻辑
const loginByAcc = async (account, password) => {
  const result = await loginByAccount(account, password)
}
//手机号登录
const phone: number = ref(17743370426)
const code: number = ref()
//手机号登录逻辑
const getCodes = async (phone) => {
  const result = await getCode(phone)
  console.log(result)
  showNotify({
    message: `验证码为${result.code}`,
    type: 'primary',
    duration: 5000
  });
}
const loginPhone = async (phone, code) => {
  const result = await loginByCode(phone, code)
  console.log(result)
}



</script>

<style lang="less" scoped>
.van-form {
  height: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
</style>
